<template>
  <el-container class="main_con" style="padding-bottom:0px">
    <div class="btn-div" v-if="!showbtns" @mousedown="goTouchstart()" @mouseup="goTouchend()"></div>
    <ufrom @submit="saveData" ref="ufrom">
      <el-form size="medium" label-width="150px">
        <div class="setting_body_item">
          <div class="header">基本类型</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="开启分销">
                <el-radio-group v-model="obj.configuration.open">
                  <el-radio :label="0">关闭</el-radio>
                  <el-radio :label="1">开启</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分销层级">
                <el-radio-group v-model="obj.configuration.level">
                  <el-radio :label="0">关闭</el-radio>
                  <el-radio :label="1">一级</el-radio>
                  <el-radio :label="2">二级</el-radio>
                  <el-radio v-if="showbtns" :label="3">三级</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分销内购">
                <el-radio-group v-model="obj.configuration.inPurchasing">
                  <el-radio :label="0">关闭</el-radio>
                  <el-radio :label="1">开启</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="佣金比例">
                <div class="distribution">
                  <div class="setting_area">
                    <div class="setStyle" v-if="obj.configuration.level > 0">
                      <!--     <div class="u-flex el-input-group--append el-input-group--prepend">
                          <div class="el-input-group__prepend">
                             <span>一级</span>
                          </div>

                          <el-input-number  :controls="false" v-model="num" @change="obj.configuration.profit.first" :min="0.01" :max="100" label="">

                          </el-input-number>
                        </div> -->

                      <el-input @change="changenum($event, 1)" placeholder="" v-model="obj.configuration.profit.first" class="input-with-select">
                        <span slot="prepend">一级</span>
                        <el-button slot="append">%</el-button>
                      </el-input>
                    </div>
                    <div class="setStyle" v-if="obj.configuration.level > 1">
                      <el-input @change="changenum($event, 2)" placeholder="" v-model="obj.configuration.profit.second" class="input-with-select">
                        <span slot="prepend">二级</span>
                        <el-button slot="append">%</el-button>
                      </el-input>
                    </div>
                    <div class="setStyle" v-if="obj.configuration.level > 2">
                      <el-input @change="changenum($event, 3)" placeholder="" v-model="obj.configuration.profit.third" class="input-with-select">
                        <span slot="prepend">三级</span>
                        <el-button slot="append">%</el-button>
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </div>

        <div class="setting_body_item">
          <div class="header">分销资格设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="成为分销商条件">
                <el-radio-group v-model="obj.configuration.become.type">
                  <el-radio :label="0">无条件</el-radio>
                  <el-radio :label="1">购买商品</el-radio>
                  <el-radio :label="2">消费金额</el-radio>
                  <el-radio :label="3">支付订单数量</el-radio>
                  <el-radio :label="4">申请</el-radio>
                </el-radio-group>
                <div v-if="obj.configuration.become.type == 0" style="color:#909399;font-size:12px;">用户注册成为商场会员即成为分销商</div>
              </el-form-item>
              <el-form-item v-if="obj.configuration.become.type == 1">
                <div class="fks">
                  <el-form label-width="120px">
                    <el-form-item label="购买指定商品">
                      <el-button @click="showSelectPro = true">选择商品</el-button>
                      <div class="list">
                        <el-table :data="list">
                          <el-table-column label="商品">
                            <template slot-scope="scope">
                              <div class="proImg">
                                <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master" fit="fit"></vimage>
                                <span class="pro_t0" v-if="scope.row.type == 0">实</span>
                                <span class="pro_t1" v-if="scope.row.type == 1">虚</span>
                                <span style="flex: 1;">{{ scope.row.name }}</span>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作">
                            <template slot-scope="scope">
                              <el-button type="text">删除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-form-item>
                    <el-form-item label="统计方式">
                      <el-radio-group v-model="obj.configuration.become.condition.buyCommodity.statistics">
                        <el-radio :label="0">订单付款后</el-radio>
                        <el-radio :label="1">订单完成后</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </el-form-item>
              <el-form-item v-if="obj.configuration.become.type == 2">
                <div class="fks">
                  <el-form label-width="120px">
                    <el-form-item label="消费条件">
                      <el-input v-model="obj.configuration.become.condition.explainTotal.explain" style="width:240px;margin-right:10px;margin-left:10px">
                        <template slot="prepend">
                          消费满
                        </template>
                        <template slot="append">
                          元
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="统计方式">
                      <el-radio-group v-model="obj.configuration.become.condition.explainTotal.statistics">
                        <el-radio :label="0">订单付款后</el-radio>
                        <el-radio :label="1">订单完成后</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </el-form-item>
              <el-form-item v-if="obj.configuration.become.type == 3">
                <div class="fks">
                  <el-form label-width="120px">
                    <el-form-item label="消费条件">
                      <el-input v-model="obj.configuration.become.condition.payOrder.orderCount" style="width:240px;margin-right:10px;margin-left:10px">
                        <template slot="prepend">
                          消费满
                        </template>
                        <template slot="append">
                          次
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="统计方式">
                      <el-radio-group v-model="obj.configuration.become.condition.payOrder.statistics">
                        <el-radio :label="0">订单付款后</el-radio>
                        <el-radio :label="1">订单完成后</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </el-form-item>
              <el-form-item label="审核页面顶部图片">
                <div style="width:100px;height:100px;"><Upload :tempUrl="obj.configuration.titleImg" @input="getImage($event, 'titleImg')"></Upload></div>
              </el-form-item>
              <el-form-item label="是否需要审核">
                <el-radio-group v-model="obj.configuration.isAudit">
                  <el-radio :label="1">需要</el-radio>
                  <el-radio :label="0">不需要</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">分销商升级设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="开启分销商升级">
                <el-radio-group v-model="obj.configuration.isUp">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="展示分销升级条件">
                <el-radio-group v-model="obj.configuration.is_agent_level">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">上下线关系设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="成为下线条件">
                <el-radio-group v-model="obj.configuration.relationship">
                  <el-radio :label="0">首次点击分享链接并登录</el-radio>
                  <el-radio :label="1">首次付款</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">分销中心</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="分销二维码">
                <el-radio-group v-model="obj.configuration.code_type">
                  <el-radio :label="0">默认</el-radio>
                  <el-radio :label="2">自定义</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="自定义背景" v-if="obj.configuration.code_type">
                <div style="width:100px;height:100px;"><Upload :tempUrl="obj.configuration.code_bg" @input="getImage($event, 'code_bg')"></Upload></div>
                <el-button @click="showcode = true" class="u-m-t-20" v-if="obj.configuration.code_bg">设置定位</el-button>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">其他设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="佣金显示">
                <el-radio-group v-model="obj.configuration.is_show_profit">
                  <el-radio :label="0">关闭</el-radio>
                  <el-radio :label="2">所有人可见</el-radio>
                  <el-radio :label="1">分销可见</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </ufrom>
    <el-dialog title="选择商品" :visible.sync="showSelectPro" width="50%" append-to-body>
      <SelectProduct :data="selectPro" :limit="100" @outData="closePro"></SelectProduct>
    </el-dialog>
    <el-dialog title="二维码定位" :visible.sync="showcode" width="50%" append-to-body>
      <div class="u-flex u-col-top ">
        <div class="left-div">
          <div class="u-m-r-20 code-box">
            <vimage :src="obj.configuration.code_bg"></vimage>
            <img
              class="code-img"
              :style="
                'width:' +
                  obj.configuration.code_position.width +
                  'px;height:' +
                  obj.configuration.code_position.height +
                  'px;bottom:' +
                  obj.configuration.code_position.bottom +
                  'px;right:' +
                  obj.configuration.code_position.right +
                  'px'
              "
              src="@/assets/images/goods_col2.png"
              alt=""
            />
          </div>
        </div>
        <!--  <img src="" alt="" />-->
        <div>
          <el-form>
            <el-form-item label="二维码宽度">
              <div class="slider_box">
                <el-slider class="slider_item" :max="150" :min="50" v-model="obj.configuration.code_position.width"></el-slider>
                <el-input-number v-model="obj.configuration.code_position.width" :controls="false" :min="50" :max="150"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="二维码高度">
              <div class="slider_box">
                <el-slider class="slider_item" :max="150" :min="50" v-model="obj.configuration.code_position.height"></el-slider>
                <el-input-number v-model="obj.configuration.code_position.height" :controls="false" :min="50" :max="150"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="距离底部">
              <div class="slider_box">
                <el-slider class="slider_item" :max="100" v-model="obj.configuration.code_position.bottom"></el-slider>
                <el-input-number v-model="obj.configuration.code_position.bottom" :controls="false" :min="0" :max="100"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="距离右侧">
              <div class="slider_box">
                <el-slider class="slider_item" :max="300" v-model="obj.configuration.code_position.right"></el-slider>
                <el-input-number v-model="obj.configuration.code_position.right" :controls="false" :min="0" :max="300"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
          <el-button v-has size="medium" type="primary" @click="showcode = false">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import SelectProduct from '@/components/SelectProduct/index.vue';
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
import Upload from '@/components/Upload/SingleImage2';
import {getProList} from '@/api/shop/dndlist';
export default {
  data() {
    return {
      isLoading: false,
      showSelectPro: false,
      showcode: false,
      selectPro: [],
      list: [],
      showbtns: false,
      obj: {
        type: 'agentExplain',
        status: 1,
        configuration: {
          open: 0,
          level: 0,
          inPurchasing: 0,
          profit: {
            first: 0,
            second: 0,
            third: 0
          },
          become: {
            type: 0,
            condition: {
              buyCommodity: {
                commodity: [],
                statistics: 0
              },
              explainTotal: {
                explain: 0,
                statistics: 0
              },
              payOrder: {
                orderCount: 0,
                statistics: 0
              },
              apply: {
                isShow: 0
              }
            }
          },
          titleImg: '',
          isAudit: 0,
          relationship: 0,
          is_show_profit: 0,
          code_type: 0,
          code_bg: '',
          code_position: {
            bottom: 0,
            right: 0,
            width: 100,
            height: 100
          }
        }
      }
    };
  },
  components: {
    SelectProduct,
    Upload
  },
  mounted() {
    this.getConfig('agentExplain');
  },
  methods: {
    goTouchstart() {
      let _this = this;
      clearTimeout(_this.timeOutEvent);
      _this.timeOutEvent = setTimeout(function() {
        _this.timeOutEvent = 0;
        _this.showbtns = true;
      }, 3000);
    },
    //手如果在600毫秒内就释放，则取消长按事件
    goTouchend() {
      let _this = this;
      clearTimeout(_this.timeOutEvent);
      if (_this.timeOutEvent !== 0) {
        //  处理单击事件
      }
    },
    changenum(data, i) {
      if (Number(data) - 0.01 < 0) {
        if (i == 1) {
          this.obj.configuration.profit.first = 0.01;
        } else if (i == 2) {
          this.obj.configuration.profit.second = 0.01;
        } else if (i == 3) {
          this.obj.configuration.profit.third = 0.01;
        }
      }
      // this.obj.configuration.profit.first=0.01
    },
    closePro(data) {
      this.showSelectPro = false;
      if (data) {
        this.list = data;
        let list = [];
        this.list.forEach(a => {
          list.push(a.id);
        });
        this.obj.configuration.become.condition.buyCommodity.commodity = list;
      }
    },
    getImage(val, tag) {
      this.obj.configuration[tag] = val;
    },
    //获取站点配置数据
    getConfig(type) {
      this.isLoading = true;
      getSiteConfig(type)
        .then(res => {
          this.isLoading = false;
          if (res.msg) {
            let obj = res.msg;
            if (!obj.configuration.code_type) {
              obj.configuration.code_type = 0;
              obj.configuration.code_bg = '';
              obj.configuration.code_position = {
                bottom: 0,
                right: 0,
                width: 100,
                height: 100
              };
            }
            this.obj = obj;
            let ids = this.obj.configuration.become.condition.buyCommodity.commodity;
            if (ids.length > 0) {
              this.getData(ids);
            }
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //搜索数据本体
    getData(ids) {
      let params = {
        id: ids
      };
      getProList(params, 1, 10).then(res => {
        this.list = res.msg.data;
      });
    },
    //保存数据
    saveData() {
      this.isLoading = true;
      if (this.obj.update_time) {
        //更新
        editSiteConfig(this.obj)
          .then(res => {
            this.$refs.ufrom.init();
            this.getConfig('agentExplain');
            this.$store.dispatch('common/getagentrank');
          })
          .catch(e => {
            this.$refs.ufrom.init();
          });
      } else {
        //新增
        addSiteConfig(this.obj)
          .then(res => {
            this.$refs.ufrom.init();
            this.getConfig('agentExplain');
          })
          .catch(e => {
            this.$refs.ufrom.init();
          });
      }
    }
  }
};
</script>
<style type="text/css" lang="scss">
.setStyle {
  .el-input-number {
    width: 95px;
    input {
      border-radius: 0 !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.btn-div {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
}
.proImg {
  display: flex;
  align-items: center;
}
.list {
  width: 1200px;
  margin-top: 10px;
}

//分销样式
.distribution {
  width: 720px;
  box-sizing: border-box;
  // padding: 20px;

  .el-select .el-input {
    width: 110px;
  }

  .setting_area {
    background: #fff;
    display: flex;
    border-bottom: 1px solid #dcdfe6;

    &:last-child {
      border-bottom: 0;
    }

    .setStyle {
      // flex: 1;
      width: 240px;
      padding: 0px 10px;

      &.tc {
        text-align: center;
      }
      input {
        border-radius: 0;
      }
    }
  }
}

.slider_box {
  display: flex;
  .el-input-number {
    width: 100px;
    position: relative;
    &::after {
      content: 'px';
      position: absolute;
      right: 10px;
      top: 0px;
    }
    .el-input {
      width: 100px;
    }
  }
}
.slider_box_num {
  display: flex;
  .el-input-number {
    width: 120px;
  }
}

.slider_item {
  width: 240px;
  margin-right: 20px;
}

.slider_input {
  width: 110px;
}
.left-div {
  max-height: 750px;
  overflow-y: scroll;
}
.code-box {
  width: 375px;
  position: relative;
  .code-img {
    position: absolute;
  }
}
</style>
